<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位遮罩层</title>
</head>
<style>
    .mask{
        background-color: rgba(0, 0, 0, 0.1);
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
</style>
<body>
    <div class="mask">
        <div>
            <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto eligendi fugiat, impedit ipsum,
                labore libero necessitatibus nesciunt nisi nobis obcaecati omnis possimus quas quos sunt tempora tenetur
                vero voluptatibus.
            </div>
            <div>A accusamus adipisci dolores ducimus eius error maiores similique! Animi aspernatur ea eos, expedita
                hic laborum modi non veniam. Ad aut blanditiis corporis maiores quaerat repellat reprehenderit similique
                voluptas voluptates.
            </div>
            <div>Animi, assumenda consectetur consequatur cupiditate earum expedita labore, molestias pariatur quasi qui
                repellendus, tempora totam veniam veritatis voluptatum! Aliquam assumenda commodi consequatur doloremque
                expedita ipsum magni quos totam ullam veniam?
            </div>
            <div>Accusantium aliquid autem consequatur dolor dolore doloremque ea excepturi facilis fuga id magnam odio
                odit optio perferendis praesentium quae quis quo quod repellat velit, veniam voluptas voluptates. A
                excepturi, voluptatum?
            </div>
            <div>Beatae consectetur itaque quis reiciendis tempora. Aperiam, cupiditate impedit maiores nihil ullam
                unde? Asperiores atque dignissimos error ipsa nostrum voluptas! Dolore quo rem repellat soluta.
                Asperiores porro quisquam recusandae vero.
            </div>
            <div>Adipisci alias amet animi asperiores assumenda culpa dignissimos doloribus eligendi enim exercitationem
                facilis fuga impedit ipsam itaque laudantium magnam minus modi molestias necessitatibus numquam
                perferendis praesentium repellendus similique, tempora ullam.
            </div>
            <div>Alias atque consequuntur corporis ea earum et, ipsam nemo nisi odio, officiis omnis quo. A assumenda
                ipsum laboriosam placeat repellat sed. Accusamus, nesciunt, ullam! Doloremque iure natus quisquam quo
                sequi?
            </div>
            <div>Accusantium alias, aliquam aliquid consequuntur dolore dolorum eaque et id ipsa magnam nemo nostrum
                officiis, optio, pariatur quo repellat repudiandae rerum sint voluptatem voluptatibus? Aut laboriosam
                modi numquam possimus vitae!
            </div>
            <div>A accusamus ad corporis delectus, dolor, doloremque eius ex excepturi facilis id ipsum magnam nemo
                neque perferendis recusandae sequi, soluta veritatis voluptatibus? Corporis laudantium natus porro
                quidem quo reprehenderit voluptas!
            </div>
            <div>Aliquid deleniti distinctio dolorem facere iste iure libero magni pariatur quae similique. Architecto
                debitis dolorem doloribus, eligendi et ipsam ipsum, minus mollitia nostrum numquam praesentium qui
                quidem rerum? Id, natus.
            </div>
            <div>A, consectetur dicta dolor eligendi hic ipsum maxime natus porro provident quae quidem, sed sit? Amet
                ex excepturi minima. Delectus eligendi ipsum iusto recusandae reprehenderit saepe, sequi vel vitae.
                Nostrum!
            </div>
            <div>Ab ad amet aperiam asperiores atque consectetur dolor dolore, doloribus esse ex id illum necessitatibus
                nesciunt nostrum perferendis placeat praesentium, quidem, recusandae reiciendis repellendus sit soluta
                vel velit voluptate voluptatem?
            </div>
            <div>Debitis dolores eaque illo optio qui. Amet eveniet quidem ratione! Aspernatur blanditiis debitis esse
                necessitatibus optio reiciendis similique. Deserunt dignissimos iste iure laborum molestiae quasi
                quibusdam quisquam saepe, ut vitae.
            </div>
            <div>Ab doloribus eum quis rerum totam! Doloribus explicabo natus nihil non soluta vel. Alias aperiam,
                asperiores atque dignissimos doloribus mollitia omnis perferendis possimus quis ratione soluta tempore
                velit voluptate voluptatibus.
            </div>
            <div>Ab alias at beatae deleniti, ducimus ea eos eum eveniet exercitationem hic, illum iusto minus molestiae
                mollitia numquam omnis porro quas quibusdam recusandae repudiandae rerum, ut vero. Beatae, soluta,
                veritatis?
            </div>
            <div>Delectus deserunt distinctio dolorum ducimus est iure maiores, nulla odio quas reprehenderit soluta
                tempora temporibus unde, voluptatem voluptatum? Debitis, explicabo vero? Commodi facere ipsa iure
                maiores molestias nesciunt quisquam similique?
            </div>
            <div>Ab aperiam at aut culpa ducimus eligendi id iusto magnam magni minima natus nobis odio officiis placeat
                quasi quis reiciendis tenetur, unde, voluptate voluptatum! Architecto molestias mollitia nesciunt non
                obcaecati!
            </div>
            <div>Aperiam assumenda consequuntur dicta eius laudantium sint vero! Amet atque cumque delectus deleniti
                dolorum expedita laudantium nulla obcaecati odio quis, sequi sit, soluta vitae voluptatibus voluptatum!
                Consequuntur eos neque omnis?
            </div>
            <div>Aliquid amet consequuntur laboriosam! Beatae fuga harum id ipsa iusto, odit quos sunt tenetur? Alias
                aliquam atque iste maiores odit quod similique sunt ut. Debitis exercitationem impedit sapiente
                similique vel!
            </div>
            <div>Ab amet culpa, doloremque eos eveniet ipsa iusto laboriosam magnam, odio pariatur perferendis possimus
                quo, sunt! A, enim expedita, iusto nemo nulla quae rem sapiente sit sunt temporibus unde vitae.
            </div>
        </div>
    </div>
</body>
</html>